style: Fix oversights in screenshot UI css for high contrast

- fix non-working is_highcontrast if statements in drawing
- add missing hc bits for screenshot UI elements

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3030>

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 85f16fb3cd39d020630c54125d3dbb08dba60d6a..404c4dc81ad610757205a9c927ee08433b658a77 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -166,56 +166,67 @@
 
   // focused button
   @if $t==focus {
+    $focus_bg_color: mix($button_bg_color, $selected_bg_color, 90%);
     color: $tc;
-    background-color: mix($button_bg_color, $selected_bg_color, 90%);
+    background-color: $focus_bg_color;
     box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
     &:hover {
-      background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
+      background-color: lighten($focus_bg_color, 3%);
       box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
     }
     &:active {
-      background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
+      background-color: lighten($focus_bg_color, 6%);
       box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
     }
   }
 
   // hover button
   @else if $t==hover {
+    $hover_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%));
     color: $tc;
-    background-color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%));
+    background-color: $hover_bg_color;
 
-    @if $is_highcontrast == "true" {
-      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%);
-      background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%);
+    @if $is_highcontrast {
+      background-color: mix($hover_bg_color, $hc_inset_color, 10%);
     }
   }
 
   // active button
   @else if $t==active {
+    $active_bg_color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%));
     color: $tc;
-    background-color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%));
-    @if $is_highcontrast == "true" {
-      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%);
-      background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%);
+    background-color: $active_bg_color;
+
+    @if $is_highcontrast {
+      background-color: mix($active_bg_color, $hc_inset_color, 10%);
     }
   }
 
   // checked button
   @else if $t==checked {
+    $checked_bg_color:if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%));
     color: $tc;
-    background-color: if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%));
-    @if $is_highcontrast == "true" {
-      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%);
-      background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%);
+    background-color: $checked_bg_color;
+
+    &:hover { background-color: lighten($checked_bg_color, 12%);}
+    &:active { background-color: lighten($checked_bg_color, 15%);}
+
+    @if $is_highcontrast {
+      background-color: mix($checked_bg_color, $hc_inset_color, 10%);
+      &:hover { background-color: mix(lighten($checked_bg_color, 12%), $hc_inset_color, 10%);}
+      &:active { background-color: mix(lighten($checked_bg_color, 15%), $hc_inset_color, 10%);}
     }
-    &:hover { background-color: lighten($button_bg_color, 12%);}
-    &:active { background-color: lighten($button_bg_color, 15%);}
   }
 
   // insensitive button
   @else if $t==insensitive {
     color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
     background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95));
+
+    @if $is_highcontrast {
+      // no border since it isn't sensitive
+      box-shadow: none;
+    }
   }
 
   // default/suggested button
@@ -245,7 +256,6 @@
   @else if $t==undecorated {
     background-color: transparent;
     background-color: none;
-    box-shadow: none;
     &:insensitive {
       @include button(insensitive);
       background-color: transparent;

diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 69edb053b177ad2c12730f404c5f4b975c9ac29e..16274ab3ce41805a47f14ed86465a0b227e6a316 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -55,7 +55,7 @@ $screenshot_ui_button_red: $error_color;
 
   &:hover, &:focus {
     .screenshot-ui-capture-button-circle {
-      background-color: darken($osd_fg_color, 15%);
+      background-color: darken($osd_fg_color, 20%);
     }
   }
 
@@ -88,6 +88,11 @@ $screenshot_ui_button_red: $error_color;
   padding: $screenshot_ui_shot_cast_spacing;
   spacing: $screenshot_ui_shot_cast_spacing;
 
+
+  @if $is_highcontrast {
+    box-shadow: inset 0 0 0 1px $hc_inset_color;
+  }
+
   &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
   &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
 }
@@ -95,14 +100,17 @@ $screenshot_ui_button_red: $error_color;
 .screenshot-ui-shot-cast-button {
   padding: $base_padding $base_padding*2;
   background-color: transparent;
+  border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
+  StIcon { icon-size: $base_icon_size;}
+
+  @if $is_highcontrast {
+    box-shadow: inset 0 0 0 1px $hc_inset_color;
+  }
+
   &:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);}
   &:active { background-color: transparentize($osd_fg_color, .5);}
   &:checked { background-color: $osd_fg_color; color: $osd_bg_color;}
   &:insensitive { color: transparentize($osd_fg_color, 0.5);}
-
-  border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
-
-  StIcon { icon-size: $base_icon_size;}
 }
 
 .screenshot-ui-show-pointer-button {